<template>
  <div id="cesiumContainer"></div>
</template>

<script setup>
import { onMounted } from 'vue'
import * as Cesium from 'cesium'
// 点线面--实体 entity

// 等组件挂载成功后实例
onMounted(async () => {
  const defaultAccessToken =
    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzZTU0NzgzYS0xNWNjLTRmZmEtOGQzMi1lY2JmM2IwNzUzMjIiLCJpZCI6MjUwMzcwLCJpYXQiOjE3Mjk3MzU0OTN9.ulTss00xhgzkk6fqIWqBvlIqfO3A0xMEtYUrST9zTL8'

  Cesium.Ion.defaultAccessToken = defaultAccessToken

  // 所有API的开始--控件
  const viewer = new Cesium.Viewer('cesiumContainer', {})

  // 写发一
  // 1.声明实体
  // const point = new Cesium.Entity({
  //   position: Cesium.Cartesian3.fromDegrees(120, 30),
  //   point: {
  //     pixelSize: 20, //点像素大小
  //     color: Cesium.Color.BLUE, //添加颜色
  //   },
  // })
  // 添加实体
  // viewer.entities.add(point)

  // 写法二（推荐）
  viewer.entities.add({
    id: 'point',
    position: Cesium.Cartesian3.fromDegrees(120, 30),
  })
})
</script>



<style scoped>
#cesiumContainer {
  width: 100vw;
  height: 100vh;
}
:deep(.cesium-widget-credits) {
  display: none;
}
</style>
